<template>
	<div class="container">
		<!--查询列表-->
		<YdTable
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData.data"
			ref="multipleTable"
			@sizeChangeHandler="queryGrid"
			@currentChangeHandler="queryGrid"
			@sortChangeHandler="queryGrid"
		>
		</YdTable>
	</div>
</template>

<script setup name="BreakAgentList" lang="tsx">
import { reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getAgentShowList } from '@/api/management/selfMonitoring/agentStatusMonitoring';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();
const route = useRoute();

// 搜索表单数据
let formData = reactive({
	//...this.$route.query将接收别的页面跳转过来的参数，放到formData里面，由组件去查找
	...route.query,
	pageNum: 1,
	pageSize: 10,
});
// 列表配置
let tableConfig = reactive<TableConfigType>({
	getAgentShowList,
	columns: [
		{
			label: 'Agent IP',
			prop: 'agentIp',
			width: 90,
		},
		{
			label: '别名',
			prop: 'aliasName',
		},
		{
			label: '状态',
			prop: 'agentStatus',
			width: 60,
			formatter(row: any, val: any) {
				// Agent状态：0正常；1异常；2断采
				if (val == 0) {
					return '正常';
				} else if (val == 1) {
					return '异常';
				} else {
					return '断采';
				}
			},
		},
		{
			label: '采集时间',
			prop: 'lastUpdateTime',
			width: 160,
		},
		{
			label: '重启',
			prop: 'rebootFlag',
			width: 60,
			renderXss: (row: any, val: any) => {
				if (val === 0) {
					return <span>否</span>;
				} else {
					return <span style="color: red;">是</span>;
				}
			},
		},
		{
			label: '重启总次数',
			prop: 'rebootCount',
			width: 100,
		},
		{
			label: '丢包率',
			prop: 'minuteCaptureLostRate',
			width: 80,
			renderXss: (row: any) => {
				if (row.minuteCaptureCount != null && row.minuteCaptureCount != 0) {
					var rate = Math.round((row.minuteCaptureLostCount / (row.minuteCaptureCount + row.minuteCaptureLostCount)) * 10000) / 100 + '%';
					if (row.wrongStatus == 2) {
						return <span style="color: red;">{rate}</span>;
					} else {
						return <span>{rate}</span>;
					}
				}
				return <span>0%</span>;
			},
		},
		{
			label: 'CPU使用率',
			prop: 'cpuRate',
			width: 100,
			renderXss: (row: any) => {
				var rate = Math.round((row.cpuRate / 10000) * 10000) / 100 + '%';
				if (row.wrongStatus == 3) {
					return <span style="color: red;">{rate}</span>;
				} else {
					return <span>{rate}</span>;
				}
			},
		},
		{
			label: '内存使用率',
			prop: 'memoryRate',
			width: 100,
			renderXss: (row: any) => {
				var rate = Math.round((row.memoryRate / 10000) * 10000) / 100 + '%';
				if (row.wrongStatus == 4) {
					return <span style="color: red;">{rate}</span>;
				} else {
					return <span>{rate}</span>;
				}
			},
		},
		{
			label: '磁盘使用率',
			prop: 'diskRate',
			width: 100,
			renderXss: (row: any) => {
				var rate = Math.round((row.diskRate / 100) * 10000) / 100 + '%';
				if (row.wrongStatus == 5) {
					return <span style="color: red;">{rate}</span>;
				} else {
					return <span>{rate}</span>;
				}
			},
		},
		{
			label: '入库时间',
			prop: 'createTime',
			width: 160,
		},
		{
			label: '网口名',
			prop: 'capturePort',
		},
		{
			label: '抓包总数',
			prop: 'minuteCaptureCount',
			width: 80,
		},
	],
	// 开启复选框
	enableSelection: false,
	// 开启分页
	pagination: {
		pageNum: 1,
	},
	// 加载层
	loading: true,
});
// 列表数据
let tableData = reactive({
	data: [],
});

onMounted(() => {
	searchHandler();
});

// 搜索
function searchHandler() {
	formData.pageNum = 1;
	queryGrid();
}
//查询列表数据
function queryGrid() {
	tableConfig.loading = true;
	getAgentShowList(formData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		tableData.data = res.data.data;
		tableConfig.pagination!.total = res.data.data;
	});
}
</script>

<style lang="scss" scoped>
.container {
	margin: 10px;
}

#agentHeadDiv {
	padding-top: 0px;
	padding-bottom: 20px;
	padding-left: 20px;
}
</style>
